<template>
    <div class="box">
        <navBar title="分类"></navBar>

        <van-row>
            <van-col span="4">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="(v, i) in list" :key="i" :title="v.cat_name" />
                </van-sidebar>
            </van-col>
            <van-col span="18" offset="2">
                <div v-for="(v, i) in list[active]?.children" :key="i">
                    {{ v.cat_name }}
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(value, index) in v.children" :key="index"
                            @click="toSearch(value.cat_name)">
                            <van-image :src="value.cat_icon" />
                            <div>{{ value.cat_name }}</div>
                        </van-grid-item>
                    </van-grid>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import navBar from '@/components/navBar.vue';

import { ref } from "vue"

import { categoriesApi } from '@/api/api';
import router from '@/router';

const active = ref(0);

let list = ref({})

const classList = () => {
    categoriesApi().then((res) => {
        console.log(res)
        list.value = res.data.message
    })
}
classList()

// 跳转到首页
const toSearch = (name) => {
    // console.log(213)
    router.push({ path: '/main/home', query: { name: name } })
}

</script>

<style lang="scss" scoped></style>